<template>
  <div id="bg">
    <div id="container">
      <Waterfall
        :list="classInfList"
        :gutter="20"
        :width="320"
        :breakpoints="{
          1200: { //当屏幕宽度小于等于1200
            rowPerView: 3
          },
          800: { //当屏幕宽度小于等于800
            rowPerView: 2
          },
          500: { //当屏幕宽度小于等于500
            rowPerView: 1
          }
        }"
      >
        <template #item="{ item }">
          <router-link :to="{ name:'ClassList', params: {classId: item.id} }">
            <class-card :class-info="item" />
          </router-link>
        </template>
      </Waterfall>
    </div>
  </div>
</template>

<script>
import ClassCard from '@/views/category/components/ClassCard'
import { fetchCategory } from '@/api/category'
import Waterfall from 'vue-waterfall-plugin'
import 'vue-waterfall-plugin-test/dist/vue-waterfall-plugin.css'

export default {
  name: 'Category',
  components: { ClassCard, Waterfall },
  props: {},
  data() {
    return {
      total: 0,
      currentPage: 1,
      pageSize: 50,
      classInfList: []
    }
  },
  created() {

  },
  mounted() {
    fetchCategory(this.currentPage, this.pageSize).then(res => {
      this.classInfList = res.data['list']
      this.total = res.data['cnt']
    })
  },
  methods: {}
}
</script>

<style scoped>
#bg {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

#container {
  width: 85%;
}

a {
  text-decoration: none; /* 去除默认的下划线 */
  outline: none;        /* 去除旧版浏览器的点击后的外虚线框 */
  color: #000;          /* 去除默认的颜色和点击后变化的颜色 */
}
</style>
